ReactNative タブ型ナビゲーションの実現

概要

ReactNativeでタブ型ナビゲーションを実現したい

基本中の基本から、よく使う機能まで満遍なく記載しておく

Agenda

準備

よく使う設定

1. 基本中の基本

2. タブを装飾したい

3. デフォルトタブを設定したい

4. タブにアイコンを設定したい & ラベルを設定したい

5. ヘッダーを無くしたい

準備

$ yarn add react-navigation/native react-navigation/bottom-tabs

1. 基本中の基本

hr.icon

code: App.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { NavigationContainer } from '@react-navigation/native';

import { Sample } from './src/components/elements/Sample';

import { Sample2 } from './src/components/elements/Sample2';

// Navigatorインスタンスを作成

const TabNav = createBottomTabNavigator();

export default function App() {

return (

<NavigationContainer>

<TabNav.Navigator>

<TabNav.Screen name="sample" component={Sample} />

<TabNav.Screen name="sample2" component={Sample2} />

</TabNav.Navigator>

</NavigationContainer>

);

}

2. タブを装飾したい

hr.icon

code: App.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { NavigationContainer } from '@react-navigation/native';

import { Sample } from './src/components/elements/Sample';

import { Sample2 } from './src/components/elements/Sample2';

// Navigatorインスタンスを作成

const TabNav = createBottomTabNavigator();

export default function App() {

return (

<NavigationContainer>

<TabNav.Navigator

screenOptions={{

tabBarStyle: {

borderTopWidth: 0,

elevation: 0,

margin: 0

}

}}

<TabNav.Screen name="sample" component={Sample} />

<TabNav.Screen name="sample2" component={Sample2} />

</TabNav.Navigator>

</NavigationContainer>

);

}

3. デフォルトタブを指定したい

hr.icon

code: App.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { NavigationContainer } from '@react-navigation/native';

import { Sample } from './src/components/elements/Sample';

import { Sample2 } from './src/components/elements/Sample2';

// Navigatorインスタンスを作成

const TabNav = createBottomTabNavigator();

export default function App() {

return (

<NavigationContainer>

<TabNav.Navigator

initialRouteName="sample2"

<TabNav.Screen name="sample" component={Sample} />

<TabNav.Screen name="sample2" component={Sample2} />

</TabNav.Navigator>

</NavigationContainer>

);

}

4. タブにアイコンを設定したい & ラベルを設定したい

hr.icon

code: App.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { NavigationContainer } from '@react-navigation/native';

import { Sample } from './src/components/elements/Sample';

import { Sample2 } from './src/components/elements/Sample2';

// アイコンは何でもいい

import AntDesign from 'react-native-vector-icons/AntDesign';

// Navigatorインスタンスを作成

const TabNav = createBottomTabNavigator();

export default function App() {

return (

<NavigationContainer>

<TabNav.Navigator>

<TabNav.Screen

name="sample"

component={Sample}

options={{

tabBarLabel: "サンプル",

tabBarIcon: ({ color, size }) => (

<AntDesign name="calendar" color={color} size={size} />

)

}}

/>

<TabNav.Screen

name="sample2"

component={Sample2}

options={{

tabBarLabel: "サンプル2",

tabBarIcon: ({ color, size }) => (

<AntDesign name="setting" color={color} size={size} />

)

}}

/>

</TabNav.Navigator>

</NavigationContainer>

);

}

5. ヘッダーを無くしたい（ちょっと複雑）

hr.icon

他に比べて少しややこしい

ポイント

code: App.js

import {SafeAreaProvider} from 'react-native-safe-area-context';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { NavigationContainer } from '@react-navigation/native';

import { Sample } from './src/components/elements/Sample';

import { Sample2 } from './src/components/elements/Sample2';

// Navigatorインスタンスを作成

const TabNav = createBottomTabNavigator();

export default function App() {

return (

<SafeAreaProvider>

<NavigationContainer>

<TabNav.Navigator

screenOptions={{

headerShown: false

}}

<TabNav.Screen name="sample" component={Sample} />

<TabNav.Screen name="sample2" component={Sample2} />

</TabNav.Navigator>

</NavigationContainer>

</SafeAreaProvider>

);

}

code: Sample.js

import React from 'react'

import { View, Text } from 'react-native'

import SafeAreaView from 'react-native-safe-area-view';

export const Sample = () => {

return (

<SafeAreaView>

<View>

<Text>Ohhhhhhhhhhhhh</Text>

</View>

</SafeAreaView>

)

}

参考